<template>
<div :class="$style.container">
  <div id="xg"></div>
  <div :class="$style.content">
    <h4 :class="$style.title">{{film.original_title}}</h4>
    <p :class="$style.rate">{{film.rate}} / {{film.genres ? film.genres.join(' / '): ''}}</p>
    <div :class="$style.actor">{{film.actors ? film.actors.map(item => item.name).join('、') : ''}}</div>
    <div :class="$style.summary">
      <span v-if="isUp" :class="$style.down" @click.stop="isUp=false"><i/>查看简介</span>
      <p :class="isUp ? [$style.desc,$style.hide]: [$style.desc,$style.height]">{{film.summary}}</p>
      <span v-if="!isUp" :class="$style.up" @click.stop="isUp=true"><i/>收起</span>
    </div>
    <div :class="$style.see">{{film.collect_count}} 人次观看</div>
  </div>
</div>
</template>

<script>
import Player from 'xgplayer'
// import 'xgplayer-mp4'
export default {
  props: {
    film: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      isUp: true
    }
  },
  components: {
    Player
  },
  beforeDestroy () {
    this.player.destroy()
  },
  watch: {
    film: {
      handler (val) {
        if (val.videoUrl) {
          this.init()
        }
      },
      deep: true
    }
  },
  methods: {
    init () {
      this.player = new Player({
        id: 'xg',
        fluid: true,
        volume: 0.6,
        whitelist: ['iPhone OS 9', 'iPhone OS 10', 'iPhone OS 11', 'iPhone OS 12', 'Android'],
        playsinline: true,
        enterBg: { // 视频加载页背景
          color: 'rgba(0,0,0,0.87)'
        },
        enterTips: { // 视频加载页加载特效
          background: 'linear-gradient(to right, rgba(0,0,0,0.87), #3D96FD, rgba(86,195,248), #3D96FD, rgba(0,0,0,0.87))'
        },
        pluginRule: true,
        closeVideoDblclick: true, // 关闭默认的dblclick触发进入/退出全屏功能
        closeVideoTouch: true, // 关闭默认的touchend触发视频暂停/播放功能
        'x5-video-player-type': 'h5',
        'x5-video-player-fullscreen': false,
        'x5-video-orientation': 'portraint',
        rotate: {   // 视频旋转按钮配置项
          innerRotate: true, // 只旋转内部video
          clockwise: false // 旋转方向是否为顺时针
        },
        poster: this.film.coverurl,
        url: this.film.videoUrl
      })
    }
  }
}
</script>

<style lang='less' module>
.container {
  color:#fff;
  .content {
    padding: 10px;
    box-sizing: border-box;
    .title {
      font-size: 18px;
      line-height: 30px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rate {
      font-size: 13px;
      line-height: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .actor {
      font-size: 13px;
      line-height: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .down {   
      color: rgba(255,255,255,.6);
      i {    
        margin-right:8px;
        display: inline-block;
        width: 7px;
        height:7px;
        border-left:2px solid rgba(255,255,255,.6);
        border-bottom:2px solid rgba(255,255,255,.6);
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        vertical-align: 3px;
      }   
    }
    .hide {
      max-height:0px;
      overflow: hidden;
    }
    .desc {
      transition: max-height 0.5s;
      -webkit-transition: max-height 0.5s;
      font-size: 13px;
      line-height: 20px;
      color: rgba(255,255,255,.8);
    }
    .height {
      max-height:500px;
    }
    .up {
      color: rgba(255,255,255,.6);
      i {    
        margin-right:8px;
        display: inline-block;
        width: 7px;
        height:7px;
        border-top:2px solid rgba(255,255,255,.6);
        border-right:2px solid rgba(255,255,255,.6);
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        vertical-align: -2px;
      }
    }
    .see {
      font-size: 13px;
      line-height: 28px;
      font-weight: 700;
    }
  }
}

</style>